$(function () {
    //绑定事件 绑定银行卡功能
    $('#btn-bind').click(function () {
        let userid = sessionStorage.getItem('userid')
        let bankName = $('#bankName option:selected').val();
        let branchName = $('#branchName').val();
        let cardNumber = $('#cardNumber').val();

        //判定银行名称
        switch(bankName){
            case'1':
            bankName='中国银行'
            break;

            case'2':
            bankName='工商银行'
            break;

            case'3':
            bankName='农业银行'
            break;

            case'4':
            bankName='招商银行'
            break;

            default:
                break;

}


        $.ajax({
            url: 'http://139.9.177.51:3333/p2p/bindCard',
            type: 'post',
            data: {
                userid,
                bankName,
                branchName,
                cardNumber
            },
            success: function (data) {
                if (data.code == 200) {
                    alert('银行卡绑定成功')
                    getCard()
                } else {
                    alert('此卡已被绑定')
                }
            }

        })

        //获取银行卡并渲染
        //初始化数据
        getCard();
        function getCard() {
            $.ajax({
                url: 'http://139.9.177.51:3333/p2p/cardList',
                type: 'GET',
                data: {
                    userid: sessionStorage.getItem('userid')
                },
                success: function (data) {
                    // console.log(data);
                    if (data.code == 200) {
                        // console.log(data.data);
                        let len = data.data.length;
                        let res = data.data;
                        //定义字符串存放到每一个li
                        let htmlStr = '';

                        //遍历
                        for (let i = 0; i < 6; i++) {
                            console.log(res[i]);//银行名称
                            console.log(res[i].cardNumber);//银行卡号
                            htmlStr += `   
                            <li class="col-md-4">
                            <p>
                                银行名称:
                                <span class="bankName">${res[i].bankName}</span>
                            </p>
                            <p>
                                卡号:
                                <span class="cardNumber">${res[i].cardNumber}</span>
                            </p>
                        </li>`;
                        }
                            //渲染到页面
                        $('#cardList').html(htmlStr)
                    } else {
                        alert('获取银行卡失败')
                    }

                }




            })


        }



    })



})